<template>
  <div class="store-board">
    <h1 style="font-size: 23px;">我的商店</h1>
    <!-- 分割线 -->
    <el-divider></el-divider>
    <h1 class="tip">
      <el-icon style="margin-right: 5px;">
        <InfoFilled/>
      </el-icon>
      注：点击商店名可以进入商店首页
    </h1>
    <el-table v-loading="loading" :data="stores" style="width: 100%">
      <el-table-column prop="storeId" label="商店ID" width="180"></el-table-column>
      <el-table-column prop="storeName" label="商店名称" width="180">
        <template v-slot="scope">
          <el-button @click="enterStore(scope.row.storeId)" link :disabled="scope.row.status === 0">
            {{ scope.row.storeName }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="80" align="center"
                       :filters="[{ text: '开业中', value: 1 }, { text: '已关闭', value: 0 }]">
        <template v-slot="scope">
          <el-tag size="small" v-if="scope.row.status === 1" type="success">开业中</el-tag>
          <el-tag size="small" v-else-if="scope.row.status === 0" type="danger">已关闭</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="registeredCapital" label="注册资金 / 元" width="130">
        <template v-slot="scope">
          {{ stores[scope.$index].registeredCapital.toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column prop="registrationDate" label="注册时间" width="105"></el-table-column>
      <el-table-column prop="accountId" label="商店账户ID" width="180"></el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="150">
        <template v-slot="scope">
          <el-button size="small" :disabled="scope.row.status === 0" type="primary" plain
                     @click="enterStoreManage(scope.row.storeId)">管理
          </el-button>
          <el-button size="small" :disabled="scope.row.status === 0" type="danger" plain
                     @click="closeStore(scope.row.storeId)">
            关店
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import {onMounted, ref, getCurrentInstance} from 'vue'
import {useStore} from 'vuex'
import {useRouter} from 'vue-router';

const store = useStore();
const {proxy} = getCurrentInstance();
const router = useRouter();

const stores = ref([]);
let loading = ref(false);

// 获取商户拥有的所有商店
const getMyStore = async (userId) => {
  let res = await proxy.$api.store.getSellerStore(userId);
  stores.value = res.data;
}

// 进入商店管理界面
const enterStoreManage = (manageStoreId) => {
  store.commit('store/updateManageStoreId', manageStoreId);
  router.push('/store-manage/home')
}

// 进入商店首页
const enterStore = (storeId) => {
  store.commit('store/updateStoreId', storeId);
  router.push('/mall/store')
}

// 发起关店申请
const closeStore = async (storeId) => {
  let confirm = await ElMessageBox.confirm(
      '关店将会导致商店中所有的商品下架，且注册资金无法退还，确定发起关店申请吗？',
      '确认关店',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      });
  if (confirm === 'confirm') {
    loading.value = true;
    let ret = await proxy.$api.store.storeDeleteRequest(storeId).catch(error => {
      console.log(error);
      loading.value = false;
      ElMessage.error({showClose: true, message: "发起关店申请失败"});
    })
    if (ret.status === 200) {
      loading.value = false;
      ElMessage.success({showClose: true, message: "发起关店申请成功"})
    }
  }
}

onMounted(async () => {
  loading.value = true;
  await getMyStore(store.state.user.userId);
  loading.value = false;
})
</script>

<style lang="less" scoped>
.store-board {
  background: linear-gradient(180deg, #ecf0f5ee 0%, #ffffffea 100%);
  padding: 30px;
  border-radius: 10px;

  /* 分割线 */

  .el-divider {
    border-top: 2px solid rgba(170, 165, 165, 0.651);
  }

  .tip {
    display: flex;
    margin-bottom: 20px;
  }
}
</style>